<template>
  <!--  短信登录页面-->
  <div class="box2">
    <div style="display: flex; flex-direction: column; align-items: center">
      <div style="margin-top: 40px">
        <h1>微课堂</h1>
      </div>
      <div class="login-message-item1"
      >
        <div style="display: flex; width: 300px; justify-content: center">
          <div class="login-tab-item" @click="show('login_password')">
            密码登录
          </div>
          <div
            class="login-tab-line"
            style="margin-left: 15px; margin-right: 15px"
          ></div>
          <div class="login-tab-item" @click="show('login_message')">
            短信登录
          </div>
        </div>
        <div class="login-message-item2"
        >
          <div class="login-message-item3"
          >
            <div>
              <input
                style="font-size: 15px"
                maxlength="11"
                name="phone"
                v-model="phone"
                type="tel"
                oninput="value=value.replace(/[^\d]/g, '')"
                placeholder="请输入手机号"
              />
            </div>
          </div>
          <div class="login-message-item4"
          >
            <input
              style="font-size: 15px; padding-left: 4px"
              v-model="code"
              placeholder="请输入验证码"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g, '')"
            />
            <div class="login-tab-line"></div>
            <button
              class="login-sms-send clickable disable"
              style="color: #00aeec "
              @click="
              // getVerifyCode(),
              sendCode()"
            >
              {{isRun?'${runTime}s后重新获取':'获取验证码'}}
            </button>
          </div>
        </div>
        <div style="height: 40px"></div>
      </div>
      <div style="margin-top: 10px">
        <div class="lr-button">
          <button
            type="primary"
            class="register-bt"
            @click="toRegister"
          >
            注册
          </button>
          <button class="login-bt" @click.prevent="handlelogin">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

const value1 = ref(false);

export default {
  name: "login_message",
  data() {
    return {
      phone: "",
      code: "",
      st: "false",
      //倒计时
      isRun: false,
      runTime : 60
    };
  },
  computed: {
    rightphone() {
      return /^1[34578]\d{9}$/.test(this.rightphone());
    },
  },
  methods: {
    // 发送验证码
    async sendCode(){
      if (this.isRun) return;
      // 判断电话号码
      if(!/^1\d{10}$/.test(this.phone)){
        window.alert("请输入正确的手机号码！");
        return;
      }
      // 验证手机号是否被注册
      let data = await this.$api.personal.phone(this.phone);
      if(parseInt(data.code) == 0 ){
        window.alert("手机号码已经被注册，请重新输入");
        return;
      }
      //通知服务器发送验证码
      data = await this.$api.personal.code(this.phone);
      if(parseInt(data.code) == 1 ){
        window.alert("当前网络繁忙，请稍后再试");
        return;
      }
      //开启倒计时
      this.isRun = true;
      this.autoTimer = setInterval( () => {
          if( this.runTime === 0){
            this.runTime = 60;
            this.isRun = false;
            clearInterval(this.autoTimer);
            return;
          }
        this.runTime--;
      },1000 );

    },

    // handlelogin: function () {
    //   if (
    //     this.phone === localStorage["phone"] &&
    //     this.code === localStorage["code"]
    //   ) {
    //     this.$router.replace("/HomePage"); //如果输入的用户名以及密码正确路由跳转至个人页面
    //   } else if (this.phone === "") {
    //     //名字为空
    //     alert("手机号不为空");
    //   } else if (this.code === "") {
    //     //密码为空
    //     alert("密码不为空");
    //   } else {
    //     alert("账号不存在，请注册后登录"); //查无此号
    //   }
    // },

    //点击注册按钮，跳转至注册页面
    toRegister: function () {
      this.$router.replace("/register");
    },

    show(index) {
      if (index == "login_message") {
        this.$router.push("/login_message");
      }
      if (index == "login_password") {
        this.$router.push("/login_password");
      }
    },
    // getVerifyCode() {
    //   let setTime = setInterval(() => {
    //     this.count--;
    //     if (this.count === 0) {
    //       this.count = 60;
    //       clearInterval(setTime);
    //     }
    //   }, 1000);
    // },
  },
};
</script>

<style scoped></style>
